// Copyright 2014 Google Inc. All rights reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//   http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

{namespace e2e.ext.ui.templates.dialogs.backupkey autoescape="strict"}


/**
 * Creates a grid layout based on the number of rows/cols and length.
 * @param? opt_caption The caption for the table
 * @param content The content to be rendered in the grid.
 */
{template .grid}
  <table>
    {if $opt_caption}<caption>{$opt_caption}</caption>{/if}
    <tbody>
      {$content}
    </tbody>
  </table>
{/template}


/**
 * A single cell in a .grid.  Only to be called as a param to .grid.
 * @param length Th length of the data.
 * @param i The index of the cell being rendered.
 * @param content The content to be rendered in the cell.
 */
{template .gridCell}
  {let $dimension: e2e.ext.constants.BackupCode /}
  {let $rowstart: $length / $dimension.ROWS /}
  {let $colstart: $rowstart / $dimension.COLS /}
  {if $i % $rowstart == 0}
    <tr>
  {/if}
  {if $i % $colstart == 0}
    <td>
  {/if}
  {$content}
  {if $i % $colstart == $colstart - 1}
    </td>
  {/if}
  {if $i % $rowstart == $rowstart - 1}
  </tr>
  {/if}
{/template}


/**
 * Displays the serialized backup data to the user.
 * @param key The key to be displayed.
 * @param caseSensitiveText Reminder text that codes are case sensitive.
 */
{template .backupKey}
  <div class="{e2e.ext.constants.CssClass.KEYRING_BACKUP_WINDOW}">
    {call .grid}
      {param content kind="html"}
        {foreach $i in $key}
          {call .gridCell}
            {param length: $key.length /}
            {param i: index($i) /}
            {param content: $i /}
          {/call}
        {/foreach}
      {/param}
    {/call}
    <span>{$caseSensitiveText}</span>
  </div>
{/template}


/**
 * Displays a prompt for the user to enter restore information.
 * @param emailLabel The label for the email input.
 * @param backupCodeLabel The label for the backup code input.
 */
{template .restoreKey}
  /* TODO(rcc): Remove when we can use keyserver for lookups */
  <div>
    <label>
      <div>{$emailLabel}</div>
      <input type="text" class="{e2e.ext.constants.CssClass.KEYRING_RESTORE_EMAIL}">
    </label>
  </div>

  <div class="{e2e.ext.constants.CssClass.KEYRING_BACKUP_WINDOW}">
    {call .grid}
      {param opt_caption: $backupCodeLabel /}
      {param content kind="html"}
        {let $dimension: e2e.ext.constants.BackupCode /}
        {let $length: $dimension.ROWS * $dimension.COLS /}
        {let $celllength: ceiling(e2e.ext.constants.BACKUP_CODE_LENGTH / $length) /}
        {for $i in range($length)}
          {call .gridCell}
            {param length: $length /}
            {param i: $i /}
            {param content kind="html"}
              <input type="text" maxlength="{$celllength}"{sp}
                  class="{e2e.ext.constants.CssClass.KEYRING_RESTORE_INPUT}">
            {/param}
          {/call}
        {/for}
      {/param}
    {/call}
    <span>&nbsp;</span>
  </div>
{/template}
